<template>
  <view class="container" :style="appThemeStyle">
    <view class="search">
      <text class="iconfont" @click="handleScan">&#xe6af;</text>
      <u-search
        class="search-input"
        placeholder="请输入编码/条码/名称查询"
        bg-color="#fff"
        search-icon-color="#bfbfbf"
        color="#333"
        placeholder-color="#999"
        @search="handleSearch"
        @clear="handleSearch"
        :show-action="false"
        v-model="keyword"
      />
      <text class="iconfont" @click="showGoodsPopup = true">&#xe6ae;</text>
    </view>
    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" @up="upCallback">
      <view class="goods-list">
        <view class="card" v-for="item in goodsList" :key="item.id">
          <view class="card-body">
            <view class="goods-info">
              <view class="goods-name u-line-2">{{ item.skuName }}</view>
              <view class="goods-notes">编码：{{ item.skuCode || '' }}</view>
              <view class="goods-notes">条码：{{ item.barcode || '' }}</view>
              <view class="goods-notes">单位/规格：{{ item.unit || '' }}</view>
              <view class="goods-notes">
                <text>重量(g)：{{ item.weight || '' }}</text>
                <text class="goods-place">产地：{{ item.productionPlace || '' }}</text>
              </view>
            </view>
            <view class="goods-status" :class="[ item.syncOnlineStatus === 0  ? 'blue': 'green' ]">{{ item.syncOnlineStatus === 0 ? '未创建' : '已创建' }}</view>
          </view>
          <view v-if="item.syncOnlineStatus === 0" class="goods-apply">
            <view v-if="item.status === null" class="apply" @click="apply(item.id)">申请线上售卖</view>
            <view v-if="item.status === 0" class="apply finish">已申请</view>
          </view>
        </view>
      </view>
    </mescroll-body>
    <!-- 商品筛选弹窗 -->
    <u-popup
      v-model="showGoodsPopup"
      border-radius="24"
      :closeable="true"
      mode="bottom"
      :safe-area-inset-bottom="true"
    >
      <view class="goods-popup">
        <view class="page-title">商品筛选</view>
        <view class="popup-body">
          <view class="row">
            <view class="label">线上商品创建</view>
            <view class="btn-wrap">
              <view class="btn" :class="{ 'active': syncOnlineStatus === '' }" @click="syncOnlineStatus = ''">全部</view>
              <view class="btn" :class="{ 'active': syncOnlineStatus === 1 }" @click="syncOnlineStatus = 1">已创建</view>
              <view class="btn" :class="{ 'active': syncOnlineStatus === 0 }" @click="syncOnlineStatus = 0">未创建</view>
            </view>
          </view>
          <view class="row">
            <view class="label">申请状态</view>
            <view class="btn-wrap">
              <view class="btn" :class="{ 'active': status === '' }" @click="status = ''">全部</view>
              <view class="btn" :class="{ 'active': status === 0 }" @click="status = 0">已申请</view>
              <view class="btn" :class="{ 'active': status === 1 }" @click="status = 1">未申请</view>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <view class="btn-item" @click="handleReset">清空</view>
          <view class="btn-item active" @click="handleSave">保存</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import * as GoodsApi from '@/api/goods'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
import { getEmptyPaginateObj, getMoreListData } from '@/core/app'

export default {
  mixins: [MescrollMixin],
  data() {
    return {
      goodsList: getEmptyPaginateObj(),
      keyword: '',
      status: '',
      syncOnlineStatus: '',
      showGoodsPopup: false,
      // 上拉加载配置
      upOption: {
        // 首次自动执行
        auto: true,
        // 每页数据的数量; 默认10
        page: { size: 10 },
        // 数量要大于3条才显示无更多数据
        noMoreSize: 3,
        empty: {
          tip: '这里空空如也~'
        }
      }
    }
  },
  methods: {
    handleScan() {
      uni.scanCode({
        success: res => {
          this.keyword = res.result
          this.onRefreshList()
        },
        fail: () => {
          this.$toast('未识别到该商品')
        }
      })
    },
    // 刷新列表
    onRefreshList() {
      this.goodsList = getEmptyPaginateObj()
      setTimeout(() => {
        this.mescroll.resetUpScroll()
      }, 120)
    },
    /**
     * 上拉加载的回调 (页面初始化时也会执行一次)
     * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
     * @param {Object} page
     */
    upCallback(page) {
      this.getGoodsList(page.num)
        .then(res => {
          const curPageLen = res.length
          this.mescroll.endBySize(curPageLen)
        })
        .catch(() => this.mescroll.endErr())
    },
    /**
     * 获取商品列表
     * @param {Number} current 页码
     */
    getGoodsList(current = 1) {
      return new Promise((resolve, reject) => {
        const params = {
          keyword: this.keyword,
          status: this.status,
          syncOnlineStatus: this.syncOnlineStatus
        }
        GoodsApi.getAppliesList({ ...params,  current }, { load: false })
          .then(result => {
            // 合并新数据
            const newList = result?.data || []
            this.goodsList = getMoreListData(newList, this.goodsList, current)
            resolve(newList)
          })
          .catch(reject)
      })
    },
    apply(id) {
      if (this.showLoading || !id) return
      this.showLoading = true
      this.$u.debounce(() => {
        GoodsApi.applyGoodsLaunch(id, { load: false }).then(res => {
          const { data } = res
          if (data) {
            this.$toast('申请成功，待总部完善商品信息后可在线上售卖')
            this.onRefreshList()
          }
        }).catch(() => {
        }).finally(() => {
          this.showLoading = false
        })
      })
    },
    handleSearch() {
      this.onRefreshList()
    },
    handleReset() {
      this.status = ''
      this.syncOnlineStatus = ''
      this.onRefreshList()
    },
    handleSave() {
      this.showGoodsPopup = false
      this.onRefreshList()
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 24rpx;

  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .iconfont {
      font-size: 40rpx;
      color: #666666;
    }

    .search-input {
      flex: 1;
      margin: 0 16rpx;
    }
  }

  .goods-list {

    .card {
      width: 100%;
      background: #fff;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 16rpx;

      .card-body {
        display: flex;
        justify-content: space-between;

        .goods-info {
          flex: 1;

          .goods-name {
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 12rpx;
          }

          .goods-notes {
            line-height: 40rpx;
            font-size: 24rpx;
            color: #666;

            .goods-place {
              margin-left: 80rpx;
            }
          }
        }

        .goods-status {
          margin-left: 24rpx;
        }

        .green {
          color: #23C343;
        }

        .blue {
          color: #2D71FD;
        }
      }

      .goods-apply {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 16rpx;

        .apply {
          font-size: 28rpx;
          color: #fff;
          background: #2D71FD;
          border-radius: 8rpx;
          padding: 8rpx 24rpx;
        }

        .finish {
          background: #A8CEFF;
        }
      }
    }
  }

  .goods-popup {
    padding: 32rpx;

    .page-title {
      text-align: center;
      margin-bottom: 40rpx;
      font-size: 36rpx;
      font-weight: bold;
    }

    .popup-body {

      .row {
        padding: 24rpx 0;
        border-bottom: 1rpx solid #eee;

        .label {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 24rpx;
        }

        .btn-wrap {
          display: flex;
          flex-wrap: wrap;

          .btn {
            width: 162rpx;
            line-height: 64rpx;
            color: #666;
            background: #F8F8F8;
            border-radius: 16rpx;
            margin-right: 16rpx;
            font-size: 24rpx;
            text-align: center;

            &.active {
              color: #fff;
              background: #2D71FD;
            }
          }
        }
      }
    }

    .popup-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 16rpx;

      .btn-item {
        width: 330rpx;
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        border: 2rpx solid #eee;
        border-radius: 16rpx;
        color: #333;

        &.active {
          color: #fff;
          background: #2D71FD;
        }
      }
    }
  }
}
</style>
